refactor: bump `style-dictionary` and `@tokens-studio/sd-transforms` to latest by jcfranco · Pull Request #11655 · Esri/calcite-design-system

jcfranco · 2025-02-28T23:38:41Z

Related Issue: #11391

Summary

This updates the design tokens build with significant restructuring changes, based on @alisonailea’s astump/style-dictionary-4.x branch. The output remains in sync with production as much as possible to prevent breaking changes.

This is the first step required before addressing additional changes proposed in #11391.

Notable changes

Source restructuring

Deprecates global output files in favor of semantic output
Splits source into:
- config – main setup for output files
- build – style-dictionary + @tokens-studio/sd-transforms configuration
- tokens – design token JSON files (source of truth)
Moves tests one level higher

Test and snapshot updates

Tweaks spec test snapshot to make it easier to spot differences in test failures (see alternative diff and commit details)
- Should be mainly visual or have no impact on consumable output
Removes non-token-related tests – these should be added once the design tokens are updated and stable

Transform and token updates

Configures and overrides transforms to match the existing test snapshot; these will be adjusted or removed as updates are made
Removes the button component token source file (unused)
Adds token-related entries to our custom @cspell dictionary
JS/Docs output types (undocumented)
- Types now match the output (e.g., compare {semantic.color.foreground.1} source vs type)
- No longer have strongly-typed attributes object

Test failures

There are a couple of expected spec test failures related to shadows:

Color values based on a token are invalid
- Example: --calcite-shadow-0: 0 0 0 0 rgba(var(--calcite-color-neutral-blk-240), 0); – the color part is invalid syntax
Dimension values are no longer unitless
I'd like to have these reviewed before updating snapshot tests

Prep for upcoming changes

Adds hooks to handle upcoming design token source restructuring (e.g., splitting light/dark tokens into separate files).
Updates the design tokens' tsconfig.json to support next features used in build

Next steps

Coordinate with @matgalla to update build to accommodate design token updates related to #11391.

This reverts commit caed514.

… types

…name

…e working group

this is a non-breaking change

…nd no longer match the output CSS variable

jcfranco · 2025-03-26T20:42:03Z

I addressed the diffs mentioned above. There are some minor differences still, but these include:

updated token attribute data (removals are expected and need to be handled on the doc-site side)
corrected names and values

I've updated the diff links for a closer check.

benelan

Nice! Code LGTM, nothing jumped out at me besides one nitpick

…igration-ssr * origin/dev: (23 commits) build(deps): drop @types/jsdom (#11830) build(deps): update arcgis to ^4.32.13 (#11832) build(deps): update dependency @tokens-studio/sd-transforms to v1.2.12 (#11833) docs: update list of contributors (#11829) build(deps): update dependency @types/estree to v1.0.7 (#11815) refactor: bump `style-dictionary` and `@tokens-studio/sd-transforms` to latest (#11655) chore: include all node_modules dirs in clean script (#11822) chore: ignore iml files (#11828) chore: release next build(deps): update nx monorepo to v20.6.4 (#11819) build(deps): update dependency vite to v5.4.15 (#11818) build(deps): update dependency @prettier/sync to v0.5.5 (#11814) feat(input-message): add component tokens and deprecate --calcite-input-message-spacing-value (#11759) fix: update tags (#11808) chore: cherry pick release commit from main (#11813) chore: release next build(deps): update package-lock (#11810) feat(flow-item): expose `FlowItemLike` type (#11791) revert(fab): add component tokens (#11805) docs(combobox, combobox-item): update token descriptions (#11806) ...

**Related Issue:** #11391 ## Summary Since #11655 allows us to build the final variables with the base token info, we don't need the excess token metadata. This PR removes all the fields within `attributes` from core and semantic tokens aside from the `category` field, which we will keep to assist with niche token instances and documentation purposes. ## Criteria for completion - [x] Remove `attributes` (except for `category`) from all semantic and core tokens - [x] Ensure that organization and token values are retained - [x] Ensure that the token build process is unaffected ## Previous steps - [x] #11852 ## Next steps - Add missing core color tokens - Fix incorrect core color values - Audit the structural differences between tokens and Figma variables - Restructure tokens to align with Figma variables where necessary - Address #10050 - Address #11565 - Address #11581 - Address #11725 - Address #11903 - Audit the value differences between tokens and Figma variables (mainly for percentages and typography) - Finalize token and Figma variable values with Calcite designers and developers - Update token values to align with Figma variables where necessary - Document the new token creation and modification process --------- Co-authored-by: JC Franco <jfranco@esri.com>

@jcfranco

…11924) **Related Issue:** #11581 ## Summary Adds `low-saturation` colors that are missing when compared to the original [Calcite Colors](https://github.com/Esri/calcite-colors) repo: ![image](https://github.com/user-attachments/assets/9fd59ef8-ead2-43be-b80f-9a6cd8e89f14) Adds `medium-saturation` colors that are missing when compared to the original [Calcite Colors](https://github.com/Esri/calcite-colors) repo: ![image](https://github.com/user-attachments/assets/89f58c96-7f25-40b6-a6ae-1efd998c100f) Fixes incorrect value for `--calcite-color-vibrant-blue-v-bb-180`: ![image](https://github.com/user-attachments/assets/f250cf04-b0de-48b8-9e99-581541ec7b68) Fixes incorrect value for `--calcite-color-dark-green-d-gg-430`: ![image](https://github.com/user-attachments/assets/80eef2e1-26d7-4311-b9d8-69353cf83b1a) NOTE: In this PR, Tokens Studio changed some minor formatting for all otherwise unchanged token JSON files. This is due to Tokens Studio bypassing the linting process. Addressed in @jcfranco's recent PR here: #11918 This PR is a part of a series of updates that address token-related issues and set them up for use with Tokens Studio. ## Criteria for completion - [x] change `--calcite-color-vibrant-blue-v-bb-180` token value to #0089DE - [x] change `--calcite-color-dark-green-d-gg-430` token value to #11AD1D - [x] add all `low-saturation` color tokens - [x] add all `medium-saturation` color tokens ## Previous steps - [x] #11655 - [x] #11852 ## Next steps - Audit the structural differences between tokens and Figma variables - Restructure tokens to align with Figma variables where necessary - Address #10050 - Address #11565 - Address #11725 - Address #11903 - Audit the value differences between tokens and Figma variables (mainly for percentages and typography) - Finalize token and Figma variable values with Calcite designers and developers - Update token values to align with Figma variables where necessary - Document the new token creation and modification process --------- Co-authored-by: JC Franco <jfranco@esri.com>

…to latest (#11655)

**Related Issue:** #11391 ## Summary Since #11655 allows us to build the final variables with the base token info, we don't need the excess token metadata. This PR removes all the fields within `attributes` from core and semantic tokens aside from the `category` field, which we will keep to assist with niche token instances and documentation purposes. ## Criteria for completion - [x] Remove `attributes` (except for `category`) from all semantic and core tokens - [x] Ensure that organization and token values are retained - [x] Ensure that the token build process is unaffected ## Previous steps - [x] #11852 ## Next steps - Add missing core color tokens - Fix incorrect core color values - Audit the structural differences between tokens and Figma variables - Restructure tokens to align with Figma variables where necessary - Address #10050 - Address #11565 - Address #11581 - Address #11725 - Address #11903 - Audit the value differences between tokens and Figma variables (mainly for percentages and typography) - Finalize token and Figma variable values with Calcite designers and developers - Update token values to align with Figma variables where necessary - Document the new token creation and modification process --------- Co-authored-by: JC Franco <jfranco@esri.com>

@jcfranco

…11924) **Related Issue:** #11581 ## Summary Adds `low-saturation` colors that are missing when compared to the original [Calcite Colors](https://github.com/Esri/calcite-colors) repo: ![image](https://github.com/user-attachments/assets/9fd59ef8-ead2-43be-b80f-9a6cd8e89f14) Adds `medium-saturation` colors that are missing when compared to the original [Calcite Colors](https://github.com/Esri/calcite-colors) repo: ![image](https://github.com/user-attachments/assets/89f58c96-7f25-40b6-a6ae-1efd998c100f) Fixes incorrect value for `--calcite-color-vibrant-blue-v-bb-180`: ![image](https://github.com/user-attachments/assets/f250cf04-b0de-48b8-9e99-581541ec7b68) Fixes incorrect value for `--calcite-color-dark-green-d-gg-430`: ![image](https://github.com/user-attachments/assets/80eef2e1-26d7-4311-b9d8-69353cf83b1a) NOTE: In this PR, Tokens Studio changed some minor formatting for all otherwise unchanged token JSON files. This is due to Tokens Studio bypassing the linting process. Addressed in @jcfranco's recent PR here: #11918 This PR is a part of a series of updates that address token-related issues and set them up for use with Tokens Studio. ## Criteria for completion - [x] change `--calcite-color-vibrant-blue-v-bb-180` token value to #0089DE - [x] change `--calcite-color-dark-green-d-gg-430` token value to #11AD1D - [x] add all `low-saturation` color tokens - [x] add all `medium-saturation` color tokens ## Previous steps - [x] #11655 - [x] #11852 ## Next steps - Audit the structural differences between tokens and Figma variables - Restructure tokens to align with Figma variables where necessary - Address #10050 - Address #11565 - Address #11725 - Address #11903 - Audit the value differences between tokens and Figma variables (mainly for percentages and typography) - Finalize token and Figma variable values with Calcite designers and developers - Update token values to align with Figma variables where necessary - Document the new token creation and modification process --------- Co-authored-by: JC Franco <jfranco@esri.com>

Ali Stump added 30 commits December 13, 2024 14:36

WIP: styledictionary4 config setup

f61e0ec

revert(icons): restore deleted icon

24896e2

fix(tsconfig): resolve build error

10ee40f

feat(shadow): transform design token shadow values

2aa4daf

chore(registerTransforms): add transforms

86b384e

chore: clean up old design token files

30b9e4e

feat: add design token filters

d1cb55c

feat: add StyleDictionary actions

8588a09

chore: cleanup old transformers

b41dab9

chore(container-size): type should be breakpoint

9e7b4df

feat: add StyleDictionary header for calcite

c05313c

chore: add light dark platforms for old files

6eac994

feat: build StyleDictionary4 design tokens for Calcite

52b64ea

fix: remove unused StyleDictionary value transformers

caed514

chore(scss): update platform config

f78d989

chore(package): update dependencies

c6084b7

fix: remove old style dictionary 3 transformer files

e8dce39

fix: remove old StyleDictionary3 types files

f98ddf1

Revert "fix: remove unused StyleDictionary value transformers"

9c63540

This reverts commit caed514.

fix(mathSum): update function names for value transformer in tokens

b4b7fa3

fix(shadow): correctly output shadow tokens for css

519072c

fix(mathSum): allow tokens to be transformed after references and fix…

ae41e10

… types

feat(removeDefault): add transformation to remove default from token …

ac7b224

…name

fix(calciteHeader): remove superfluous comments

ddedd8e

feat(calciteTransformationGroup): move token transforms under a singl…

5dfc40d

…e working group

feat(pxToRem): transform token values from px to rems

a1ee0a0

chore(registerTransforms): add transform registerations

a3ae510

chore(buildTokens): add to typeMap

a413034

chore(scss): clean up scss config

09294ca

chore(shadow): align tokens with DTCG

b747942

this is a non-breaking change

jcfranco added 6 commits March 26, 2025 10:59

fix issue where a kebabified token name would get kebab-cased again a…

fc5423a

…nd no longer match the output CSS variable

add missing tokens to docs global output

f72529f

extract util to normalize token attr cleanup

38c8fe9

clean js output token attrs

20a9e6e

fix js output to better match production

e550fdd

merge dev

e631b3c

jcfranco marked this pull request as ready for review March 26, 2025 20:39

benelan approved these changes Mar 29, 2025

View reviewed changes

Comment thread packages/calcite-design-tokens/src/build/format/typography.ts Outdated

jcfranco added 2 commits March 28, 2025 22:13

simplify based on @benelan's suggestion

bc1c19a

merge dev

17fefaf

jcfranco added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Mar 29, 2025

jcfranco added 2 commits March 29, 2025 00:17

merge dev

5120552

recreate lockfile

ea96de1

jcfranco removed the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Mar 29, 2025

jcfranco added 2 commits March 29, 2025 00:33

recreate lockfile

3b28023

update test snapshots

b5312b9

jcfranco added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Mar 29, 2025

jcfranco merged commit db4ff3f into dev Mar 29, 2025
14 checks passed

jcfranco deleted the jcfranco/11391-bump-design-tokens-tooling branch March 29, 2025 17:41

github-actions Bot added this to the 2025-04-29 - Apr Milestone milestone Mar 29, 2025

matgalla mentioned this pull request Apr 9, 2025

refactor(tokens): Remove unnecessary token data #11915

Merged

5 tasks

matgalla mentioned this pull request Apr 10, 2025

fix(tokens): add missing core color tokens and fix incorrect values #11924

Merged

6 tasks

benelan pushed a commit that referenced this pull request May 14, 2025

refactor: bump style-dictionary and @tokens-studio/sd-transforms …

ff20550

…to latest (#11655)

jcfranco mentioned this pull request Dec 8, 2025

Update design-tokens' CONTRIBUTING.md #13414

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor: bump `style-dictionary` and `@tokens-studio/sd-transforms` to latest#11655

refactor: bump `style-dictionary` and `@tokens-studio/sd-transforms` to latest#11655
jcfranco merged 230 commits intodevfrom
jcfranco/11391-bump-design-tokens-tooling

jcfranco commented Feb 28, 2025 •

edited

Loading

Uh oh!

jcfranco commented Mar 26, 2025

Uh oh!

benelan left a comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Conversation

jcfranco commented Feb 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Notable changes

Source restructuring

Test and snapshot updates

Transform and token updates

Test failures

Prep for upcoming changes

Next steps

Uh oh!

jcfranco commented Mar 26, 2025

Uh oh!

benelan left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

jcfranco commented Feb 28, 2025 •

edited

Loading